<template>
  <!-- 页面-租户数据统计 -->
  <div class="tenant-data-statistics innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form :model="formSearch" ref="tenantStatisticsFormSearch" slot="adaption-bar" class="ivu-form-no-margin-bottom" inline>
        <template>
          <!-- 租户编码 -->
          <Form-item prop="tenantCode" :label="$t('module.tenantManage.tenantCode')">
            <Input
              type="text"
              v-model.trim="formSearch.tenantCode"
              :placeholder="$t('module.tenantManage.placeholder.tenantCode')"
              :maxlength="30"
              @on-enter="search"
            />
          </Form-item>

          <!-- 应用编码 -->
          <Form-item prop="applicationId" :label="$t('module.appManage.appCode')">
            <Input
              type="text"
              v-model.trim="formSearch.applicationId"
              :placeholder="$t('module.appManage.enterclientId')"
              :maxlength="30"
              @on-enter="search"
            />
          </Form-item>
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="formReset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tenantStatisticsTable" :config="tableConfig">
      <div slot="table-bar" v-if="useTableSearchBar">
        <RPButton :loading="loading" text="刷新" @click="onRefresh" />
      </div>
      <Form :model="formSearch"
        ref="tenantStatisticsFormSearch" 
        v-if="useTableSearchBar"
        slot="table-search-bar"
        class="ivu-form-no-margin-bottom" inline>
        <template>
          <!-- 租户编码 -->
          <Form-item prop="tenantCode">
            <Input
              type="text"
              v-model.trim="formSearch.tenantCode"
              :placeholder="$t('module.tenantManage.placeholder.tenantCode')"
              :maxlength="30"
              clearable
              @on-enter="search"
              @on-blur="search"
              @on-clear="search"
            />
          </Form-item>

          <!-- 应用编码 -->
          <Form-item prop="applicationId">
            <Input
              type="text"
              v-model.trim="formSearch.applicationId"
              :placeholder="$t('module.appManage.enterclientId')"
              :maxlength="30"
              clearable
              @on-enter="search"
              @on-blur="search"
              @on-clear="search"
            />
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import locales from "./locales.js";
import { tenantStatisticsColumns } from "./columns.js";
import { getTenantDataStatisticsList, refreshTenantDataStatistics } from "@/api/teantManageAPI.js";

export default {
  name: "tenant-data-statistics",
  mixins: [locales],
  data: () => ({
    formSearch: {
      tenantCode: "",
      applicationId: ""
    },
    loading: false
  }),
  computed: {
    tableConfig() {
      return { loadDataFn: getTenantDataStatisticsList.bind(this), columnsFn: tenantStatisticsColumns.bind(this) };
    }
  },
  created() {
  },
  mounted() {
    this.search();
  },
  watch: {
  },
  methods: {
    search(page = 1) {
      this.$refs["tenantStatisticsTable"].load(Object.assign({}, this.formSearch), page);
    },
    formReset() {
      this.$refs["tenantStatisticsFormSearch"].resetFields();
      this.search();
    },
    onRefresh () {
      this.loading = true
      refreshTenantDataStatistics().then(res => {
        this.$message.success({
          content: this.$t("common.updateSuccess"),
          duration: 3
        });
        this.loading = false
        this.search();
      }).catch(() => {
        this.loading = false
      })
    }
  }
};
</script>

<style lang="less">
// ok注释的样式
.tenant-data-statistics {
  .ivu-form-item {
    .ivu-form-item-label {
      line-height: 14px !important;
    }
  }
}
</style>
